<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>赛事管理</el-breadcrumb-item>
      <el-breadcrumb-item>赛事管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row>
        <el-col :span="12">
          <el-button @click.native="addMatchDialogVisible=true">添加赛事</el-button>
        </el-col>
      </el-row>
      <el-table :data="matchsdata" style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column prop="startime" label="开始日期" width="200">
          <template slot-scope="scope">
            <span>{{operatingTime(scope.row.startime)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="endtime" label="结束日期" width="200">
          <template slot-scope="scope">
            <span>{{operatingTime(scope.row.endtime)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="赛事名称" width="200"></el-table-column>
        <el-table-column prop="address" label="赛事地址" width="200"></el-table-column>
        <el-table-column label="操作" width="800">
          <template slot-scope="scope">
          
            <el-button @click="getEventOnMatchByMatchId(scope.row.id)">项目</el-button>
            <el-button @click.native="reportDialogVisible=true">报名</el-button>
            <!-- <el-button>裁判</el-button> -->
            <el-button>秩序册</el-button>
            <el-button>成绩册</el-button>
            <el-button>证书</el-button>
            <el-button>打分制定</el-button>

            <el-button @click="removeMatch(scope.row.id)" >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 添加比赛 -->
    <el-dialog title="添加赛事" :visible.sync="addMatchDialogVisible" width="50%">
      <el-form :model="addAsfcMatchFrom">
        <el-form-item label="比赛名称">
          <el-input v-model="addAsfcMatchFrom.name"></el-input>
        </el-form-item>
        <el-form-item label="比赛地址">
          <el-input v-model="addAsfcMatchFrom.address"></el-input>
        </el-form-item>
        <el-form-item label="比赛简介">
          <el-input type="textarea" v-model="addAsfcMatchFrom.Introduce"></el-input>
        </el-form-item>
        <el-form-item label="比赛时间">
          <el-row>
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="开始时间"
                v-model="addAsfcMatchFrom.startime"
                style="width: 50%;"
              ></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-date-picker
                placeholder="结束时间"
                v-model="addAsfcMatchFrom.endtime"
                style="width: 50%;"
              ></el-date-picker>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addMatchDialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="addAsfcMatch()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 项目编辑 -->
    <el-dialog title="项目编辑" :visible.sync="addMatchEventsDialogVisible" width="50%">
      <el-table :data="eventsOnMatchTable" style="width: 100%">
        <el-table-column prop="eventName" label="项目名称" width="180"></el-table-column>
        <el-table-column prop="refereeName" label="主裁判" width="180"></el-table-column>
        <el-table-column prop="eventStartTime" label="开始时间" width="180"></el-table-column>
        <el-table-column prop="eventEndTime" label="结束时间" width="180"></el-table-column>
        <el-table-column  label="操作" width="180">
            <template slot-scope="scope">
              <el-button @click="getsonEventsFrom(scope.row.id)">制定</el-button>
              <el-button @click="removeEvents(scope.row)">删除</el-button>
            </template>

        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button @click="getEvents()">添加项目</el-button>
        <el-button @click="addMatchEventsDialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="addMatchEventsDialogVisible=false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 项目编辑中的添加项目 -->
    <el-dialog title="项目编辑" :visible.sync="addEventsOnMatchDialogVisible" width="50%">
      <el-table
        ref="multipleTable"
        :data="eventsTableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="eventName" label="项目名称" width="120"></el-table-column>
        <el-table-column prop="eventCode" label="项目代号" width="120"></el-table-column>
        <el-table-column prop="eventRuleDesc" label="规则描述" width="1100"></el-table-column>
      </el-table>

      <el-button @click="addEventsOnMatchDialogVisible=false">取 消</el-button>
      <el-button type="primary" @click="addEventOnMatchByMatchId()" >确 定</el-button>
    </el-dialog>


<!-- 项目制定区域 -->
<el-dialog title="项目制定" :visible.sync="editEventDialogVisible" width="50%">
<el-form ref="form" :model="sonEventsFrom" label-width="80px">
  <el-form-item label="项目名称">
    <el-input v-model="sonEventsFrom.eventName" :disabled="true"></el-input>
  </el-form-item>
  <el-form-item label="比赛名称">
    <el-input v-model="sonEventsFrom.matchName" :disabled="true"></el-input>
  </el-form-item>
  <el-form-item label="主裁判">
    <el-select v-model="sonEventsFrom.eventRefereeId" placeholder="请选择该项目主裁判">
      <el-option label="张三" value="1"></el-option>
      <el-option label="李四" value="2"></el-option>
    </el-select>
  </el-form-item>
 <el-form-item label="活动时间">
 <el-date-picker
      v-model="sonEventsFrom.eventStartTime"
      type="datetime"
      placeholder="选择日期时间">
    </el-date-picker>
    <el-date-picker
      v-model="sonEventsFrom.eventEndTime"
      type="datetime"
      placeholder="选择日期时间">
    </el-date-picker>
</el-form-item>
<el-form-item label="主要规则">
    <el-select v-model="sonEventsFrom.eventRuleId" placeholder="请选择该项目执行规则">
      <el-option label="规则1" value="1"></el-option>
      <el-option label="规则2" value="2"></el-option>
    </el-select>
  </el-form-item>
</el-form>

 <el-button @click="editEventDialogVisible=false">取 消</el-button>
      <el-button type="primary" @click="updateSonEvents(sonEventsFrom)" >确 定</el-button>
 </el-dialog>

  <!-- 报名区域 -->
<el-dialog title="查看报名" :visible.sync="reportDialogVisible" width="60%">
<el-table
    :data="joinTeamData"
    stripe
    style="width: 100%">
<el-table-column
      prop="teamName"
      label="报名队伍"
      width="180">
    </el-table-column>
        <el-table-column
      prop="master"
      label="领队"
      width="180">
      </el-table-column>
    <el-table-column
      prop="orgName"
      label="所属单位"
      width="180">
    </el-table-column>
   
     <el-table-column
      prop="userNum"
      label="人数"
      width="180">
      </el-table-column>
    <el-table-column
    
      label="查看详细"
      width="180">
    </el-table-column>
       <el-table-column
      prop="cpuOption"
      label="机审意见"
      width="180">
    </el-table-column>
       <el-table-column
     
      label="是否通过"
      width="180">
    </el-table-column>
    
</el-table>
 </el-dialog>


  </div>
</template>
<style lang="less" scoped>
.el-card {
  margin: 5px;
}
</style>
<script>
export default {
  methods: {
    //移除比赛中的某个项目
      async removeEvents(eventsMatch){
      
const { data: res } = await this.$http.put(`event-on-match/removeEvents?id=${eventsMatch.id}`)
 if (res.code !== 200) {
        this.$message.error("删除失败");
      } else if (res.code === 200) {
        console.log(res.msg)
        this.$message.success("删除成功");
       
        this.getEventOnMatchByMatchId(eventsMatch.matchid)
      }
      

  },
  //
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
//添加赛事
    async addAsfcMatch() {
      

      const { data: res } = await this.$http.put("asfc-match/addAsfcMatch", {
        name: this.addAsfcMatchFrom.name,
        address: this.addAsfcMatchFrom.address,
        Introduce: this.addAsfcMatchFrom.Introduce,
        startime: this.addAsfcMatchFrom.startime,
        endtime: this.addAsfcMatchFrom.endtime,
      });
      if (res.code !== 200) {
        this.$message.error("添加失败！");
      } else if (res.code === 200) {
        this.$message.success("添加成功！");
        this.addMatchDialogVisible = false;
        this.getmatch();
      }
    },
    //获取单个比赛中某个项目的详细信息
    async getEventOnMatchByMatchId(id){
      this.matchrecode=id
      this.addMatchEventsDialogVisible=true;

const { data: res } = await this.$http.put(`event-on-match/getEventOnMatchByMatchId?id=${id}`
);
this.matchrecode=id
 if (res.code !== 200) {
        this.$message.error("获取用户列表失败！");
      } 

this.eventsOnMatchTable=res.data
    }
    ,
    helpself( ){
    var arr=this.multipleSelection;
        let multis = [];
        for (var i=0;i<arr.length;i++){
        multis.push(arr[i].id);
        console.log(multis)

    }
    return multis;
    }
    ,
    //获取在本比赛可以继续添加的项目
  

    //在赛事中添加项目
    async addEventOnMatchByMatchId(){


const { data: res } = await this.$http.put(`event-on-match/addEventOnMatchByMatchId?m
atchid=${this.matchrecode}`,{
 events:this.helpself()
}
);
 if (res.code !== 200) {
        this.$message.error("失败！");
      } else if(res.code===200){
        this.eventsOnMatchTable=res.data
      }
console.log("执行")
        this.addEventsOnMatchDialogVisible=false
    }
    ,
    //获取所有支持的项目
    async getEvents() {
     console.log(this.matchrecode)
      const { data: res } = await this.$http.get(`match-event/getThisMatchEvents?matchId=${this.matchrecode}`);
      if (res.code !== 200) {
        this.$message.error("获取失败！");
      }
      this.eventsTableData = res.data;
     this.addEventsOnMatchDialogVisible=true;
    },
    //获取单个项目的详细信息

async getsonEventsFrom(id){
  
  const { data: res } = await this.$http.get(`event-on-match/getOneEventOnMatch?id=${id}`);
      if (res.code !== 200) {
      return  this.$message.error(res.msg);
      }
     
this.sonEventsFrom.id=res.data.id
this.sonEventsFrom.eventName=res.data.eventName
this.sonEventsFrom.matchName=res.data.matchName
this.sonEventsFrom.eventRefereeId=res.data.eventRefereeId
this.sonEventsFrom.eventStartTime=res.data.eventStartTime
this.sonEventsFrom.eventEndTime=res.data.eventStartTime
this.sonEventsFrom.eventRuleId=res.data.eventRuleId
 this.editEventDialogVisible=true
}
,



    //获取所有的赛事
    async getmatch() {
      const { data: res } = await this.$http.get("asfc-match/getMatch");
      if (res.code !== 200) {
        this.$message.error("获取失败！");
      }
      this.matchsdata = res.data;
      console.log(this.matchsdata);
    },
    //删除比赛
    async removeMatch(id){
     
const { data: res } = await this.$http.put(`asfc-match/deleteMatch?id=${id}`)
 if (res.code !== 200) {
        this.$message.error("删除失败");
      } else if(res.code===200){
 this.$message.success("删除成功");

      }
      this.getmatch()
    },
    //（定义）修改赛事项目的规则
    async updateSonEvents(eventOnMatch){
    console.log("!!!!!!"+eventOnMatch)
const { data: res } = await this.$http.post("event-on-match/updateEvents",{
id:eventOnMatch.id,
eventName:eventOnMatch.eventName,
matchName:eventOnMatch.matchName,
eventRefereeId:eventOnMatch.eventRefereeId,
eventStartTime:eventOnMatch.eventStartTime,
eventEndTime:eventOnMatch.eventEndTime,
eventRuleId:eventOnMatch.eventRuleId,
 });

 if (res.code !== 200) {
        this.$message.error("修改失败！");
      }
if (res.code === 200) 
{
 this.$message.success("修改成功！");
 this.editEventDialogVisible=false
}

    },


    operatingTime(timeDate) {
      return this.$moment(timeDate).format("YYYY-MM-DD hh:mm:ss");
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.eventsAddOnMatch = this.multipleSelection
    },

      async updateEvents(eventOnMatch){
      const { data: res } = await this.$http.get("event-on-match/updateEvents",{params:eventOnMatch});
      if (res.code !== 200) {
        this.$message.error("获取失败！");
      }
      this.eventsOnMatchTable=res.data

      }


  },
  created() {
    this.getmatch();
   
  },
  data() {
    return {
      matchsdata: [],
      eventsTableData: [],
      eventsOnMatchTable:[],
      joinTeamData:[],
      
      sonEventsFrom:{
        id:'',
eventName:'',
matchName:'',
eventRefereeId:'',
eventStartTime:'',
eventEndTime:'',
eventRuleId:'',
      },
      matchrecode:'',//全局matchid
      eventsAddOnMatch:[],
      reportDialogVisible:false,
      editEventDialogVisible:false,
      addMatchDialogVisible: false,
      addMatchEventsDialogVisible: false,
      addEventsOnMatchDialogVisible: false,
      addAsfcMatchFrom: {
        name: "",
        address: "",
        Introduce: "",
        startime: "",
        endtime: "",
      },
      matchtEventsTable: [],
    };
  },
};
</script>